<template>
	<view :style="colorStyle">
		<view class="nav acea-row row-around">
			<view class="item" :class="productStatus == 1 ? 'on' : ''" @click="statusClick(1)">
				<view>售卖中</view>
			</view>
			<view class="item" :class="productStatus == 2 ? 'on' : ''" @click="statusClick(2)">
				<view>待审核</view>
			</view>
			<view class="item" :class="productStatus == 3 ? 'on' : ''" @click="statusClick(3)">
				<view>审核驳回</view>
			</view>
			<view class="item" :class="productStatus == 0 ? 'on' : ''" @click="statusClick(0)">
				<view>已下架</view>
			</view>
		</view>

		<view class="list-box listA" :class="products.length > 0 ? 'fadeIn on' : ''">
			<view class="item" :class="conStyle?'borderRadius15':''" v-for="(item, index) in products" :key="index">
				<view class="pictrue" @click="goDetail(item)">
					<span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor" v-if="item.activity && item.activity.type === '1'">秒杀</span>
					<span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor" v-if="item.activity && item.activity.type === '2'">砍价</span>
					<span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor" v-if="item.activity && item.activity.type === '3'">拼团</span>
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="text-info" style="display: flex; flex-direction: column; justify-content: space-between;" @click="goDetail(item)">
					<view>
						<view class="title line2">{{ item.store_name }}</view>
						<view class="old-price">
							<text>¥</text>
							{{ item.ot_price }}
						</view>
					</view>
					<view class="price" :style="'color:'+fontColor">
						<view>
							<text>￥</text>
							{{ item.price }}
						</view>
					</view>
				</view>
				<view class="btn">
					<button class="mini-btn" type="default" size="mini" style="margin-top: 15px;" @click="edit(item)">编辑</button>
					<button class="mini-btn" type="default" size="mini" @click="offShelf(item, 0)" v-if="productStatus == 1">下架</button>
					<button class="mini-btn" type="default" size="mini" @click="offShelf(item, 1)" v-if="productStatus == 0">上架</button>
				</view>
			</view>
		</view>

		<view class='noCommodity' v-if="products.length == 0">
			<view style="text-align: center;color: #cfcfcf;">
				<image src='https://fuli-cloud.brdhrm.com/static/images/empty-box.png'></image>
				<view>暂无商品</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		productOffShelf,
	} from '@/api/merchant.js';
	import {
		getSecondHandProducts,
	} from '@/api/second_hand.js';
	import colors from "@/mixins/color";
	export default {
		components: {
		},
		mixins: [colors],
		data() {
			return {
				products: [],
				ProductNavindex: 0,
				productStatus: 1,
			};
		},
		onLoad(option) {
			this.productStatus = option.is_show;
			this.getSecondHandProducts(option.is_show);
		},

		methods: {
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == this.productStatus) return;
				this.productStatus = status;
				this.$set(this, 'products', []);
				this.getSecondHandProducts(status);
			},
			//获取商户产品
			getSecondHandProducts(status) {
				getSecondHandProducts({
					is_show: status
				}).then(res => {
					this.products = res.data.products;
				});
			},
			goDetail(item){
				uni.navigateTo({
					url: `/pages/second_hand/goods_details/index?id=${item.id}`
				});
			},
			edit(item){
				uni.navigateTo({
					url: `/pages/second_hand/product_edit?id=${item.id}&type=edit`
				});
			},

			//上下架产品
			offShelf(item, type){
				item.is_show = type;
				let show = 1;
				if(type === 1){
					show = 0;
				}
				productOffShelf(item).then(res => {
					this.$util.Tips({
						title: res.msg
					});
					this.getSecondHandProducts(show);
				}).catch(err => {
					console.log(err)
					this.$util.Tips({
						title: err || '保存失败'
					});
					this.getSecondHandProducts(show);
				});
			},
		}
	}
</script>

<style lang="scss">
	.noCommodity {
		border-top-width: 0;
	}

	.nav {
		background-color: #fff;
		height: 80rpx;
		border-radius: 6rpx;
		margin-bottom: 10px;
	}

	.nav .item {
		text-align: center;
		font-size: 26rpx;
		color: #282828;
		padding: 30rpx 0;
		border-bottom: 5rpx solid transparent;
	}

	.nav .item.on {
		/* #ifdef H5 || MP */
		font-weight: bold;
		/* #endif */
		/* #ifdef APP-PLUS */
		color: #000;
		/* #endif */
		border-color: var(--view-theme);
	}

	.nav .item .num {
		margin-top: 18rpx;
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx 20rpx 0;

		.item {
			width: 345rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			overflow: hidden;
			position: relative;

			&.on {
				border-radius: 0;
			}

			.pictrue {
				width: 347rpx;
				height: 347rpx;
			}

			.pictrue_log {
				width: 92rpx;
				height: 44rpx;
				font-size: 26rpx;
				line-height: 44rpx;
				border-radius: 0 0 20rpx 0 !important;
			}

			image {
				width: 100%;
				// height: 346rpx;
				height: 100%;
				display: block;
			}

			.text-info {
				padding: 10rpx 20rpx 15rpx;

				.title {
					color: #222222;
				}

				.old-price {
					margin-top: 4rpx;
					font-size: 26rpx;
					color: #aaaaaa;
					text-decoration: line-through;

					text {
						margin-right: 2px;
						font-size: 20rpx;
					}
				}

				.price {
					display: flex;
					align-items: flex-end;
					font-size: 36rpx;
					font-weight: 550;

					text {
						padding-bottom: 4rpx;
						font-size: 26rpx;
						font-weight: normal;
					}

					.txt {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 28rpx;
						height: 28rpx;
						margin-left: 15rpx;
						margin-bottom: 10rpx;
						border-radius: 4rpx;
						font-size: 20rpx;
						font-weight: normal;

						&.on {
							margin-left: 0;
						}
					}
				}
			}
		}

		&.on {
			display: flex;
		}

		&.listA {
			.item {
				display: flex;
				width: 100%;
				border-bottom: 1rpx solid #f0f0f0;

				.pictrue {
					width: 220rpx;
					height: 220rpx;
				}

				.text-info {
					// width: 490rpx;
					flex: 1
				}

				.btn{
					width: 65px;
				}
			}
		}
	}
</style>
